<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/2
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>地址管理模块</title>
<%--    <script type="text/javascript" src="${pageContext.request.contextPath}/js/city.js"></script>--%>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/layui/layui.js"  type="text/javascript"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <style>
        #address-right{
            width: 850px;
            height: 600px;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid #F6F6F6;
            float: left;
        }
        .address-right-head{
            height: 40px;
            width: 850px;
            margin-top: 10px;
            margin-left: 10px;
            /* border: 1px solid black; */
            border-collapse: collapse;
        }
        .address-right-head1{

            border-bottom: 2px solid orange;
        }
        .address-right-head3{
            width: 100px;
            height: 30px;
            background-color: #ef771f;
            color: white;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
        }
        .address-right-centent{
            height: 200px;
            width: 850px;
            margin-top: 40px;
            margin-left: 10px;
            /* float: left; */
            border: 1px solid darkgray;
            border-collapse: collapse;
        }
        .address-right-centent tr{
            /* border-bottom: 1px solid #848484; */
        }
        .address-right-centent1,.address-right-centent2{
            height: 50px;
        }
        .address-right-centent1-1{
            font-weight: bold;
            padding-left: 40px;
            line-height: 40px;
            border-bottom: 1px solid #848484;
        }
        .address-right-centent2-1,.address-right-centent2-2{
            width: 150px;
            text-align: center;
            border-bottom: 1px solid #848484;
        }
        .address-right-centent2-3{
            width: 250px;
            text-align: center;
            border-bottom: 1px solid #848484;
        }
        #address-right-centent2{
            background-color: #fcf4d6;
            font-weight: bold;
        }
        .address-right-centent a{
            text-decoration: none;
        }
        .address-right-bottom{
            height: 450px;
            width: 850px;
            margin-top: 10px;
            margin-left: 10px;
            /* float: left; */
            border: 4px solid #fef3d7;
            border-bottom: 30px solid #fef3d7;
            border-collapse: collapse;
        }
        .address-right-bottom1{
            height: 60px;
            background-color: #fef3d7;
            margin-bottom: 10px;
        }
        .address-right-bottom1-1{
            width: 200px;
            height: 40px;
            margin-top: 20px;
            background-color: #FFFFFF;
            margin-left: 20px;
            line-height: 40px;
            padding-left: 20px;
            font-weight: bold;
        }
        .address-right-bottom2 tr{
            height: 40px;
            margin-top: 40px;
        }
        .address-right-bottom2-title{
            /* margin-top: 30px; */
            width: 140px;
            text-align: right;
            font-weight: bold;
        }
        .address-right-bottom2-text{
            /* margin-top: 30px; */
            width: 650px;
            padding-left: 10px;
            color: #848484;
        }
        .address-right-bottom2-text input[type="text"]{
            width: 280px;
            height: 30px;
            margin-right: 20px;
        }
        .address-right-bottom2-text select{
            width: 100px;
            height: 25px;
            /* margin-top: 20px; */
        }
        .address-right-bottom3-1,.address-right-bottom3-2{
            float: left;
            width: 60px;
            height: 40px;
            background-color: #fdad46;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
        }
        .address-right-bottom3-2{
            margin-left: 20px;
        }
        .address-font{
            color: orange;
        }
    </style>
</head>
<body>

<!-- 地址管理 -->
<table id="address-right">
    <tr>
        <td>
            <table class="address-right-head">
                <tr class="address-right-head1">
                    <td class="address-right-head2">
                        <div class="address-right-head3">
                            地址管理
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td>
            <table class="address-right-centent">

                <tr class="address-right-centent1">
                    <td colspan="5">
                        <div class="address-right-centent1-1">
                            已保存的有效地址
                        </div>
                    </td>
                </tr>
                <tr id="address-right-centent2" class="address-right-centent2">
                    <td class="address-right-centent2-1">
                        收货人
                    </td>
                    <td class="address-right-centent2-2">
                        所在地区
                    </td>
                    <td class="address-right-centent2-3">
                        街道地址
                    </td>
                    <td class="address-right-centent2-2">
                        手机
                    </td>
                    <td class="address-right-centent2-1">
                        操作
                    </td>
                </tr>
                <c:if test="${not empty addlist}">
                <c:forEach items="${addlist}" var="address" >
                <tr class="address-right-centent2" id="num${address.id}">
                    <td class="address-right-centent2-1" >
                       ${address.accept}
                    </td>
                    <td class="address-right-centent2-2">
                            ${address.province} ${address.city} ${address.area}
                    </td>
                    <td class="address-right-centent2-3">
                            ${address.address}
                    </td>
                    <td class="address-right-centent2-2">
                            ${address.telphone}
                    </td>
                    <td class="address-right-centent2-1">
                        <a href="javascript:void(0)" onclick="updateaddress(num${address.id},${address.id})">修改</a> |
                        <c:if test="${address.type == 1}">
                            <a href="javascript:void(0)"  style="text-decoration: none;color: green" >当前默认地址</a>
                        </c:if>
                        <c:if test="${address.type == 0}">
                            <a href="javascript:void(0)" onclick="changeadd(${address.id})">设为默认地址</a>
                        </c:if>
                    </td>
                </tr>
                </c:forEach>
                </c:if>
               <%-- <c:if test="${not  addlist}">
              <tr class="address-right-centent2"  style="display: none">
                    <td class="address-right-centent2-1">
                        张三
                    </td>
                    <td class="address-right-centent2-2">
                        南充
                    </td>
                    <td class="address-right-centent2-3">
                        竹溪桥街
                    </td>
                    <td class="address-right-centent2-2">
                        13244425521
                    </td>
                    <td class="address-right-centent2-1">
                        <a href="#">修改</a>
                        |默认地址
                    </td>
                </tr>
                </c:if>--%>
            </table>
        </td>
    </tr>

    <tr>
        <td>
            <table class="address-right-bottom">
                <form method="post" action="${pageContext.request.contextPath}/personal/add"  class="layui-form">
                <tr class="address-right-bottom1" >
<%--                    用于在后面追加数据--%>
                    <td colspan="2">
                        <div class="address-right-bottom1-1">
                            收货地址
                        </div>
                    </td>
                </tr>
                    <tbody id="addressWrite">
                <tr class="address-right-bottom2" >
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font" >*</font>收货人姓名:
                        </div>
                    </td>
                    <td >
                        <div class="address-right-bottom2-text">
                            <input type="text"  name="accept" class="accept"/>收货人真实姓名,方便快递公司联系。
                        </div>
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font">*</font>所在地区:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">



                        </select>
                        <select  id="cmbProvince" name="cmbProvince" onchange="showProv(this)">
                            <option  class="cmbProvince">请选择省</option>
                        </select>
                        <select id="cmbCity" name="cmbCity" onchange="showCountry(this)">
                            <option  class="cmbCity">请选择市</option>
                        </select>
                        <select id="cmbArea" name="cmbArea" onchange="selecCountry(this)">
                            <option  class="cmbArea">请选择区</option>
                        </select>

                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font">*</font>街道地址:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <input type="text"   name="addres" class="addres"/>真实详细收货地址,方便快递公司联系。
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            手机号码:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <input type="text"  name="phone" class="phone" onclick="checkPhone()"/>手机号码,如:13256457645
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            设为默认:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                            <input type="checkbox" name="rideo" lay-skin="primary" id="defaultBox" title="" value="0" class="rideo">
<%--                        <input type="text" name="rideo" lay-skin="primary" id="defaultBox" title="" value="1">--%>
<%--                        <input type="checkbox" name="rideo" />--%>
                    </td>
                </tr>
                    </tbody>
                <tr class="address-right-bottom3">
                    <td >
                    </td>
                    <td >
                        <div class="address-right-bottom3-1">
<%--                            提交前判断默认是否选中--%>
                            <button 	class="layui-btn layui-btn-radius layui-btn-warm met1" type="submit" onsubmit="return check()">保存</button>
                        </div>
                        <div class="address-right-bottom3-2">
                            <button 	class="layui-btn layui-btn-radius layui-btn-warm" onclick="abrogate()" >取消</button>
                        </div>
                    </td>
                </tr>
                <tr class="address-right-bottom4">
                    <td colspan="2">
                    </td>
                </tr>
                </form>
            </table>
        </td>
    </tr>
</table>
</body>
    <script type="text/javascript">

      var shengSelect = document.querySelector('#cmbProvince');
        var shiSelect = document.querySelector('#cmbCity');
        var quSelect = document.querySelector('#cmbArea');

        var shenglist = ['江西', '广东', '湖北', '湖南'];
        var shilist = [['南昌', '九江', '赣江'], ['广州', '深圳', '东莞'], ['武汉', '荆门', '襄阳'], ['长沙', '邵阳', '株州']];
        var qulist = [
            [['南1区', '南2区', '南3区'], ['九1区', '九2区', '九3区'], ['赣1区', '赣2区', '赣3区']],
            [['广1区', '广2区', '广3区'], ['深1区', '深2区', '深3区'], ['东1区', '东2区']],
            [['武1区', '武2区', '武3区'], ['荆1区', '荆2区', '荆3区'], ['襄1区', '襄2区', '襄3区']],
            [['岳麓区', '雨花区', '天心区'], ['隆回', '邵阳', '塘渡口'], ['珠江河', '火车站', '高铁站']]
        ];

        var index = 0;//下标

        //省
        for (var i = 0; i < shenglist.length; i++) {
            var shengOption = new Option(shenglist[i]);
            shengSelect.options.add(shengOption);
        }

        //省
        shengSelect.onchange = function (ev) {
            // console.log(ev);
            index = ev.target.selectedIndex - 1;
            // console.log(index);
            if (index == -1) {
                //选择“请选择”,让市区列表为空
                shiSelect.options.length = 0;
                quSelect.options.length = 0;
            } else {
                //再次作选择时，让市区列表为空，好重新获取市区数据
                shiSelect.options.length = 0;
                quSelect.options.length = 0;
                //在点击省时，给市添加option
                for (var j = 0; j < shilist.length; j++) {
                    console.log(shilist[index][j]);
                    var shiOption = new Option(shilist[index][j]);
                    shiSelect.options.add(shiOption);
                }
                //给区添加option
                for (var k = 0; k < qulist[index][0].length; k++) {
                    var quOption = new Option(qulist[index][0][k]);
                    quSelect.options.add(quOption);
                }
            }
        };

        //市
        shiSelect.onchange = function (e) {
            var indexs = e.target.selectedIndex;
            //再次选择时，让区的列表为空，重新获取区的数据
            quSelect.options.length = 0;
            //点击市时，给区添加option
            for (var i = 0; i < qulist[index][indexs].length; i++) {
                var quOption = new Option(qulist[index][indexs][i]);
                quSelect.options.add(quOption);
            }
        }
        //判断设为默认是否选中
        function check() {
            let val = $('input:checkbox[name="rideo"]').prop("checked");//获取选中状态
            if(val){//选中状态
                $("input[name='rideo']").val("1");
                alert($("#defaultBox").val());
                return true;
            }else {
                $("input[name='rideo']").val("0");
                alert($("#defaultBox").val());
                return true;
            }
        }
      //注意：导航 依赖 element 模块，否则无法进行功能性操作
      layui.use('element', function(){
          var element = layui.element;

      });
      function checkPhone(){
          let mobile = $(".phone").val();
          let phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
          if(mobile.length == 11){//手机号码
              if(phone.test(mobile)) {
                  return true;
              }
          }else{
              alert('请输入有效的号码！');
          }
      }
        //点击修改删除当前地址信息  传入所在tr的id 和所在行的地址id
      function updateaddress(obj,addressid) {
            // $(obj).find("td").each(function () {
            // })
           // let list =  $(obj).children('td');//获取所有td子节点 查询不出来
          $(obj).remove();//删除当前tr
          let str = "";//接收地址数据
          $.ajax({
              type: "POST",
              async:false,
              url: "${pageContext.request.contextPath}/address/findById",
              dataType: "json",
              data: "addressid="+addressid,
              success: function(data){
                      //  alert(data);
                      /*str = '<tbody id="addressWrite"><tr class="address-right-bottom2">\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-title">\n' +
                          '                            <font class="address-font" >*</font>收货人姓名:\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-text">\n' +
                          '                            <input type="text"  name="accept" value="'+data.accept+'"/>收货人真实姓名,方便快递公司联系。\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                </tr>\n' +
                          '                <tr class="address-right-bottom2">\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-title">\n' +
                          '                            <font class="address-font">*</font>所在地区:\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                    <td class="address-right-bottom2-text">\n' +
                          '                        </select>\n' +
                          '                        <select  id="cmbProvince" name="cmbProvince" onchange="showProv(this)">\n' +
                          '                            <option >'+data.province+'</option>\n' +
                          '                        </select>\n' +
                          '                        <select id="cmbCity" name="cmbCity" onchange="showCountry(this)">\n' +
                          '                            <option >'+data.city+'</option>\n' +
                          '                        </select>\n' +
                          '                        <select id="cmbArea" name="cmbArea" onchange="selecCountry(this)" >\n' +
                          '                            <option >'+data.area+'</option>\n' +
                          '                        </select>\n' +
                          '                    </td>\n' +
                          '                </tr>\n' +
                          '                <tr class="address-right-bottom2">\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-title">\n' +
                          '                            <font class="address-font">*</font>街道地址:\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                    <td class="address-right-bottom2-text">\n' +
                          '                        <input type="text"   name="addres" value="'+data.address+'"/>真实详细收货地址,方便快递公司联系。\n' +
                          '                    </td>\n' +
                          '                </tr>\n' +
                          '                <tr class="address-right-bottom2">\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-title">\n' +
                          '                            手机号码:\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                    <td class="address-right-bottom2-text">\n' +
                          '                        <input type="text"  name="phone" value="'+data.telphone+'"/>手机号码,如:13256457645\n' +
                          '                    </td>\n' +
                          '                </tr>\n' +
                          '                <tr class="address-right-bottom2">\n' +
                          '                    <td >\n' +
                          '                        <div class="address-right-bottom2-title">\n' +
                          '                            设为默认:\n' +
                          '                        </div>\n' +
                          '                    </td>\n' +
                          '                    <td class="address-right-bottom2-text">\n' +
                          '                            <input type="checkbox" name="rideo" lay-skin="primary" id="defaultBox" title="" value="1">\n' +
                          '                    </td>\n' +
                          '                </tr></tbody>';
                  alert(str );*/
                  //内容替换
             /*     $("#addressWrite").html(str);*/
                    $(".accept") .val(data.accept);
                  $(".cmbProvince") .text(data.province);
                  $(".cmbCity") .text(data.city);
                  $(".cmbArea") .text(data.area);
                  $(".address") .val(data.address);
                  $(".phone") .val(data.telphone);
                  if(data.type = 1){
                      $(".rideo").prop("checked",true);//设置为选中状态
                  }else{
                      $(".rideo") .prop("checked",false);
                  }


              }
          });

      }
       // 修改默认地址状态
        function changeadd(obj) {
            location.href = "${pageContext.request.contextPath}/personal/addressUpdate?addressid="+obj;
        }
        //取消
        function abrogate() {
        location.href = "${pageContext.request.contextPath}/personal/index";
    }
</script>
</html>
